<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript" src="getStyle.js"></script>
        <script type="text/javascript">
        	(function($){
        		$(function(){
        			//$('.box>div').find('p').css('display','none');
        			$('.box>div').each(function(){
        				
        				$(this).hover(function() {
        					$(this).find('p').delay(1000).css('display','block').animate({
        						width:'60px'
        					},200)//没生效============================================
        					$(this).css('backgroundColor','#c81623');
        					$(this).find('p').css('backgroundColor','#c81623');
        					$(this).find('p').stop(true).css('display','block').animate({
        						width:'60px'
        					},200);
        				}, function() {
        					//console.log($(this))
        					$(this).css('backgroundColor','#7a6e6e');
        					$(this).find('p').css('backgroundColor','#7a6e6e');
        					$(this).find('p').stop().animate({
        						width:'0px'
        					},200,function(){
        						//console.log($(this))
        						
        						$(this).css({
        							overflow:'hidden',
        							display:'none',
        						});
        						
        					});
        				});
        			});


                    //点击====================================
                    
                    var i=0;
                    
                    $('.box>div').click(function(){
                        console.log(i)
                        if(i%2==0){
                            $('.shop').animate({width:250},500);
                            $('.box').animate({right:250},500);
                        }else{
                            $('.shop').animate({width:0},500);
                            $('.box').animate({right:0},500);
                        }
                        i++;
                        
                    });
        		})
        	})(jQuery);
        </script>
        <style type="text/css">
        	html,body{
        		height:100%;
        	}
        	.shop{
        		height:100%;
        		background:#eceaea;
        		width:0px;
                border-left:6px solid #7a6e6e;
        		position:fixed;
        		right:0;
        		font-family:"微软雅黑";
        		font-size:12px;
        		color:white;
        	}
        	.box{
        		top:30%;
        		position:absolute;
        		right:0px;
				width:29px;
				
				height:80%;
        	}
        	.box div{
        		height:35px;
        		width:29px;
        		border-radius:3px 0 0 3px;
        		background-color:#7a6e6e;
        		margin-bottom: 1px;
        		background-image:url('toolbars.png');
        		position:relative;
        		cursor:pointer;
        	}
        	.box div p{
        		position:absolute;
        		right:26px;
        		top:-12px;
        		width:0;
        		height:35px;
        		background:#c81623;
        		display:none;
        		border-radius:3px 0 0 3px;
        		text-align:center;
        		line-height:35px;
        	}
        	.member{
        		background-position:-90px -176px;
        	}
        	.car{
        		background-position:-50px 0px;
        	}
        	.focus{
        		background-position:-50px -50px;
        	}
        	.history{
        		background-position:-50px -100px;
        	}
        	.news{
        		background-position:-190px -150px;
        	}
        	.advice{
        		background-position:-50px -150px;
        	}
        	.totop{
        		background-position:-50px -250px;
        		margin-top:290%;
        	}
        	.retroaction{
        		margin-top:1px;
        		background-position:-50px -300px;
        	}
        </style>
    </head>
    <body>
    	<div class="shop">
	    	<div class="box">
	    		<div class="member">
	    			<p>京东会员</p>
	    		</div>
	    		<div class="car">
	    			<p>购物车</p>
	    		</div>
	    		<div class="focus">
	    			<p>我的关注</p>
	    		</div>
	    		<div class="history">
	    			<p>我的足迹</p>
	    		</div>
	    		<div class="news">
	    			<p>我的消息</p>
	    		</div>
	    		<div class="advice">
	    			<p>咨询JUMI</p>
	    		</div>
	    		<div class="totop">
	    			<p>顶部</p>
	    		</div>
	    		<div class="retroaction">
	    			<p>反馈</p>
	    		</div>
	    	</div>
    	</div>
    </body>
</html>